<template>
	<view class="main-content">
		<view class="category-container">
			<!-- 左侧分类 -->
			<view class="category-list">
				<view v-for="(item, index) in categories" :key="index"
					:class="['category-item', index === activeCategory ? 'active' : '']"
					@click="changeCategory(item,index)">
					<view class="mar-0-5">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<view class="item-container">
			<!-- 右侧项目 -->
			<view class="item-list">
				<view v-for="(item, idx) in childItems" :key="item.idx" class="item-row">
					<radio :checked="item.checked" @click="changeRedio(item)" class="small-radio" />
					<view class="item-info">
						<view class="item-name start-center">
							<view>{{ item.name }}</view>
							<text class="item-en" v-if="item.en">({{ item.en }})</text>
						</view>
						<view class="item-info-bottom">
							<view class="item-price">￥{{ item.money }}</view>
							<view class="notice-btn" @click="changeModel(item)">注意事项</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showModel" mode="bottom" length="60%" @close="showModel=false">
			<view class="pad-10">
				<view class="item-title">{{item.name}}</view>
				<view class="color-red mar-5-0">￥{{item.money}}</view>
				<view class="border-col"></view>
				<view class="item-describe">
					<view class="font-weight">注意事项</view>
					<view>
						<text>{{item.describe}}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		medicalTechnologyProjectSelect
	} from '../../../api/medicalTechnologyProject'
	export default {
		props: {
			searchKey: {
				type: String,
				default: ''
			},
			items: Array,
		},
		data() {
			return {
				activeCategory: 0,
				categories: [],
				childItems: [],
				showModel: false,
				item: {},
				list: [], //被选中之前的项目
				listTemp: [], //被选中之后的项目
			}
		},
		watch: {
			activeTab() {
				this.init()
			},
		},
		mounted() {
			this.listTemp = this.items
			this.init()
		},
		methods: {
			init() {
				this.listTemp = []
				// 查询收费项目
				medicalTechnologyProjectSelect({
					medicalType: this.activeTab,
				}).then(res => {
					this.categories = res;
					console.log(this.categories)
					this.changeCategory(this.categories[0], 0)
				})

			},
			changeCategory(item, index) {
				let itemTemp = {
					...item
				}
				this.activeCategory = index
				this.childItems = []
				// 默认所有的都未选中
				if (itemTemp.child) {
					let list = itemTemp.child;
					list.forEach(item => {
						item.checked = false
					})
					this.childItems = list
				} else {
					itemTemp.checked = false;
					this.childItems.push({
						...itemTemp
					})
				}
				// 将当前的项目和已经选中的项目进行比较，如果有，则当前radio选中状态
				for (var i = 0; i < this.listTemp.length; i++) {
					for (var j = 0; j < this.childItems.length; j++) {
						if (this.childItems[j].id == this.listTemp[i].id) {
							this.childItems[j].checked = true
						}
					}
				}
			},
			changeModel(item) {
				this.showModel = true
				this.item = item;
			},
			changeRedio(item) {
				item.checked = !item.checked
				this.listTemp = []
				this.list.push({
					...item
				})
				console.log(this.list)
				if (this.list.length > 1) {
					for (var i = 0; i < this.list.length; i++) {
						console.log(this.list[i].id, this.list[i].checked, item.id, item.checked)
						if (this.list[i].id == item.id && !item.checked) {

						} else {
							this.listTemp.push(this.list[i])
						}
					}
				} else {
					this.listTemp = this.list
				}
				console.log(this.listTemp)
				this.list = this.listTemp
				this.$emit("toggle-item", this.list)
			}
		}
	}
</script>

<style scoped>
	.border-col {
		width: 100%;
		height: 1px;
		border-bottom: 1px solid rgb(215, 215, 215);
		margin: 5px 0;
	}

	.item-title {
		font-weight: bold;
	}

	.main-content {
		display: flex;
		height: calc(100vh - 130rpx);
		overflow: hidden;
		margin-bottom: 130rpx;
	}

	.category-container {
		width: 200px;
		height: 100%;
		overflow-y: auto;
		background: #F6F6F6;
		border-radius: 16rpx 0 0 0;
	}

	.category-list {
		height: 100%;
		-webkit-overflow-scrolling: touch;
	}

	.item-container {
		/* flex: 1; */
		height: 100%;
		/* overflow: auto; */
		background: #fff;
		border-radius: 0 16rpx 0 0;
	}

	.item-list {
		height: 100%;
		padding: 0 24rpx;
		overflow-y: auto;
	}

	.category-item {
		padding: 24rpx 0;
		text-align: center;
		color: #666;
		font-size: 28rpx;
		background: #F6F6F6;
		position: relative;
		line-height: 44rpx;
	}

	.category-item.active {
		color: #1cb7d6;
		font-weight: bold;
		background: #fff;
	}

	.category-item.active::before {
		content: '';
		display: block;
		position: absolute;
		width: 6rpx;
		height: 64rpx;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		background: #1cb7d6;
		border-radius: 4rpx 0 0 4rpx;
	}

	.item-row {
		display: flex;
		align-items: flex-start;
		border-bottom: 1px solid #f2f3f5;
		padding: 32rpx 0;
	}

	.small-radio {
		transform: scale(0.7);
	}

	.item-info {
		flex: 1;
	}

	.item-name {
		font-size: 30rpx;
		color: #222;
	}

	.item-info-bottom {
		width: 360rpx;
		display: flex;
		justify-content: space-between;
	}

	.item-en {
		font-size: 24rpx;
		color: #aaa;
		margin-left: 8rpx;
	}

	.item-price {
		color: #ff5a5f;
		font-size: 28rpx;
		margin-top: 8rpx;
	}

	.notice-btn {
		background: #f0faff;
		color: #1ec6e6;
		border: none;
		border-radius: 26rpx;
		font-size: 24rpx;
		padding: 4rpx 20rpx;
		margin: 10rpx 20rpx 0;
	}
</style>